I got this code to work but it I got a bug. It is opening and closing all 12 elements collectively (".share-btn-container"). Trying to get it to target only the button clicked, and it's corresponding share-btn-container. I suspect it has something to do with the "let sharePanelOpen = true".
//HTML
//12 of those divs, all sharing the "share-btns" class and "share-btn-container" class.
<button id ="share-song1" class ="share-btns"><span class ="fa"></span></button>
<div id ="share-container1" class ="share-btn-container">
<a href="#" id="facebookshare1" class ="facebook-btn"><i class ="fab fa-facebook"></i></a>
<a href="#" id="whatsappshare1" class ="whatsapp-btn"><i class ="fab fa-whatsapp"></i></a>
<a href="#" id="twittershare1" class ="twitter-btn"><i class ="fab fa-twitter"></i></a>
<a href="#" id="linkedinshare1" class ="linkedin-btn"><i class ="fab fa-linkedin"></i></a>
</div>
//Javascript
let sharePanelOpen = false;
const shareButtons = document.querySelectorAll('.share-btns');
const shareContainers = document.querySelectorAll('.share-btn-container');
function openSharePanel () {
shareContainers.forEach((container) => {
console.log(container);
sharePanelOpen = true;
container.classList.add('share-btn-container-active');
})
shareButtons.forEach((button) => {
button.classList.add('share-btns-active');
})
}
function closeSharePanel () {
shareContainers.forEach((container) => {
sharePanelOpen = false;
container.classList.remove('share-btn-container-active');
})
shareButtons.forEach((button) => {
button.classList.remove('share-btns-active');
})
}
shareButtons.forEach((button, i) => {
button.addEventListener('click', () => {
togglesharePanel();
})
})
function togglesharePanel() {sharePanelOpen ? closeSharePanel() : openSharePanel();}
//CSS
.share-btn-container {
display: none;
}
.share-btn-container-active {
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
position: absolute;
top: 78px;
left: 66px;
background: rgb(30,10,40);
border: 1px solid rgb(200,200,200);
border-radius: 6%;
width: 14.2rem;
height: 7rem;
padding: 0.5rem;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
z-index: 4;
cursor: auto;
}
You don't even need to use sharePanelOpen just pass reference of sharedContainer of corresponding button using it's index when you register click event for each button. Then in togglesharePanel() function just use toggle method of classList to add / remove 'share-btn-container-active' class
for example
const shareButtons = document.querySelectorAll('.share-btns');
const shareContainers = document.querySelectorAll('.share-btn-container');
shareButtons.forEach((button, i) => {
button.addEventListener('click', () => {
togglesharePanel(shareContainers[i]);
})
})
function togglesharePanel(shareContainersRef) {
shareContainersRef.classList.toggle('share-btn-container-active')
}
const shareButtons = document.querySelectorAll('.share-btns');
const shareContainers = document.querySelectorAll('.share-btn-container');
shareButtons.forEach((button, i) => {
button.addEventListener('click', () => {
togglesharePanel(shareContainers[i]);
toggleshareBtns(shareButtons[i])
})
})
function togglesharePanel(shareContainersRef) {
shareContainersRef.classList.toggle('share-btn-container-active')
console.log(shareContainersRef);
}
function toggleshareBtns(buttonref) {
buttonref.classList.toggle('share-btns-active')
}